<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    title="创建新指令"
    :visible.sync="dialogVisible"
  >
    <el-form
      ref="ruleForm"
      v-loading="loading"
      label-width="120px"
      :model="ruleForm"
      :rules="rules"
      size="mini"
    >
      <el-form-item label="指令ID" prop="type">
        <el-input v-model="ruleForm.type" placeholder="" spellcheck="false" />
      </el-form-item>
      <el-form-item label="指令名" prop="name">
        <el-input v-model="ruleForm.name" placeholder="" spellcheck="false" />
      </el-form-item>
      <el-form-item label="初始状态" prop="disabled">
        <el-switch v-model="ruleForm.disabled" />
      </el-form-item>
      <el-form-item label="指令描述" prop="description">
        <el-input
          v-model="ruleForm.description"
          :autosize="{ minRows: 3, maxRows: 10 }"
          spellcheck="false"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="指令参数模型" prop="data_model">
        <el-input
          v-model="ruleForm.data_model"
          :autosize="{ minRows: 3, maxRows: 10 }"
          spellcheck="false"
          type="textarea"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('ruleForm')">保存</el-button>
        <el-button @click="dialogVisible = false">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import clearWatch from "@/utils/mixin/clearWatch";
import response from "@/api/response";
export default {
  name: "InstructionAdd",
  mixins: [clearWatch],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      ruleForm: {
        type: "",
        name: "",
        disabled: false,
        description: "",
        data_model: ""
      },
      rules: {
        type: [{ required: true, message: "请输入指令ID", trigger: "blur" }],
        name: [{ required: true, message: "请输入指令名", trigger: "blur" }],
        description: [
          { required: true, message: "请输入指令描述", trigger: "blur" }
        ],
        data_model: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("不能为空"));
                return;
              }
              let Obj;
              try {
                Obj = JSON.parse(value);
              } catch {
                callback(new Error("非JSON"));
                return;
              }

              if (!Array.isArray(Obj)) {
                callback(new Error("非Array"));
                return;
              }
              Obj.forEach((k, index) => {
                let keys = Object.keys(k);
                if (
                  keys.indexOf("name") === -1 ||
                  keys.indexOf("type") === -1
                ) {
                  callback(
                    new Error(
                      `${index}下标 不存在${
                        keys.indexOf("name") === -1 ? "name" : "type"
                      }字段`
                    )
                  );
                }
              });

              callback();
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    show() {
      this.dialogVisible = !this.dialogVisible;
    },

    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = Object.assign({}, this.ruleForm);
          data.data_model = JSON.parse(data.data_model);
          data.disabled = !data.disabled;
          response
            .add({
              ...data
            })
            .then(res => {
              this.$emit("change");
              this.$message.success(res.data.message);
              this.dialogVisible = false;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
